<!Doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/jquery.fullPage.min.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/index-m.css">		
	<script src="js/jquery-1.11.2.min.js"></script>

	<!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
	<script src="js/jquery.easings.min.js"></script>

	<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
	<script src="js/jquery.slimscroll.min.js"></script>

	<script src="js/jquery.fullPage.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.messages_zh.js"></script>
	<script src="js/index-m.js"></script>
	<script src="js/testdrive.js"></script>
</head>
<body>
	<div id="fullpage">
		<div class="section img-section">
			<div class="header" style="">
				<img src="img/logo.png" alt="" id="logo">
			</div>
			<div class="slide"><img src="img/slide-1.png" alt="" class="slide-img"></div>
			<div class="slide"><img src="img/slide-1.png" alt="" class="slide-img"></div>
			<div class="slide"><img src="img/slide-1.png" alt="" class="slide-img"></div>
			<div class="slide"><img src="img/slide-1.png" alt="" class="slide-img"></div>
			<img src="img/section-2-link.png" alt="" id="section-link">
		</div>
		<div class="section video-section">
			<!-- <div class="section-2-link"> -->

			<!-- </div> -->

			<div class="video-content">
				<!-- <img src="img/video-text.png" alt="" class="text"> -->
				<div class="text">
					<img class="section-2-text" src="img/section-2-text.png" />
				</div>
				<div class="slide"><video src="video/B8.m4v"  controls="controls"></video></div>
				<div class="slide"><video src="video/B8.m4v"  controls="controls"></video></div>
				<div class="slide"><video src="video/B8.m4v"  controls="controls"></video></div>
				<div class="slide"><video src="video/B8.m4v"  controls="controls"></video></div>
			</div>
			
			<!-- <img src="img/section2-bg.png" alt="" id="section2-bg"> -->
		</div>
		<div class="section show-section">
			<div class="show-left">
				<!-- <img src="img/show-left.jpg" alt=""> -->
				<button class="point point-1 point-a" data-target="detail-1"></button>
				<button class="point point-2 point-a" data-target="detail-2"></button>
				<button class="point point-3 point-a" data-target="detail-3"></button>
				<button class="point point-4 point-a" data-target="detail-4"></button>
				<a href=""  class="go-back">
					<img class="go-back-img" src="img/go-back.png" />
				</a>
				<img class="point-img point-1" src="img/point.png" />
				<img class="point-img point-2" src="img/point.png" />
				<img class="point-img point-3" src="img/point.png" />
				<img class="point-img point-4" src="img/point.png" />
				<div class="detail">
					<img class="detail-1" src="img/w-point1.png" />
					<img class="detail-2" src="img/w-point2.png" />
					<img class="detail-3" src="img/w-point3.png" />
					<img class="detail-4" src="img/w-point4.png" />
				</div>
			</div>
			<div class="show-right">
				<!-- <img src="img/show-right.jpg" alt=""> -->
				<button href="javascript:;" class="point point-1 point-a" data-target="detail-1"></button>
				<button href="javascript:;" class="point point-2 point-a" data-target="detail-2"></button>
				<button href="javascript:;" class="point point-3 point-a" data-target="detail-3"></button>
				<a href=""  class="go-back">
					<img class="go-back-img" src="img/go-back.png" />
				</a>
				<img class="point-img point-1" src="img/point.png" />
				<img class="point-img point-2" src="img/point.png" />
				<img class="point-img point-3" src="img/point.png" />
				<div class="detail">
					<img class="detail-1" src="img/n-point1.png" />
					<img class="detail-2" src="img/n-point2.png" />
					<img class="detail-3" src="img/n-point3.png" />
				</div>
			</div>
		</div>
		<div class="section text-section">
			<div class="on-way-text">
				<img id="on-way" src="img/on-way-m.png" alt="">
				<img id="on-way-text" src="img/on-way-text-m.png" alt="">
			</div>
		</div>
		<div class="section form-section appointment-box">
			<form id="drive-form">     
			    <div class="wrapper-top">
			    	<h1>预约试驾</h1>
			        <div class="form">
		                <img class="form" src="img/form-table-m.png" usemap="#Map"/>
		                <map name="Map" id="Map">
		                <area shape="rect" coords="132,244,220,270" href="javascript:;" id="protect-principle"  onclick="showbox()"/>
		                </map>
		                <div class="try">
		                    <div class="left">
		                        <input id="name" name="name" type="text"/>
		                        <input id="tel"  name="mobile" type="text"/>
		                        <input id="email" name="email" type="text"/>
		                        	<select class="" name="" id="car">
		                                <option>蔚揽旅行轿车R-line 380 TSI</option>
		                                <option>蔚揽旅行轿车舒行版 280 TSI</option>
		                            </select>
		                    </div>
		                    <div class="right form-innder form-right">
		                        <select class="same-height short-select" name="dealerprovince" id="dealerprovince">
		                            <option value="">省份</option>
		                        </select>
		                        <select class="same-height short-select" name="dealercity" id="dealercity">
		                            <option value="">城市</option>
		                        </select>
		                        <select class="jxs fullsize same-height short-select" name="dealer" id="dealer" > 
		                        	<option selected>经销商</option>
		                        </select>
		                    </div>
		                    <div class="sex">
		                        <label>
		                            <input type="radio" value="先生" id="sex" checked=""  name="sex"/>
		                        </label>
		                        <label>
		                            <input type="radio" value="女士" id="sex2"  name="sex"/> 
		                        </label>
		                    </div>
		                    <div class="other">
		                      <div class="label">
		                        <label class="i-want">
		                                <input type="checkbox"  checked="checked"  id="i-want" name="want"/>
		                                <img class="i-want-txt" src="img/h-inf.png" alt=""/>
		                        </label>
		                          <label class="i-read">
		                              <input type="checkbox" checked="checked"  name="policy" id="i-read"/>
		                              <!--<img class="i-read" src="images/form-label2.png" alt=""/>-->
		                              <!--<a href="javascript:"><img class="i-read-a" src="images/form-label-a.png" alt=""/></a>-->
		                          	  <img class="i-read-txt" src="img/rules.png">
		                          	  <a id="i-read-a" href="javascript:;"></a>
		                          </label>
		                      </div>
		                    </div>
			            </div>
		                <div class="submit">
		                    <div> 
		                        <a href="javascript:;" id="tj" class="tj">
		                            <img src="img/submit.png" alt=""/>
		                        </a>
		                        <a href="javascript:;" id="sh" class="sh">
		                            <img src="img/share.png" alt=""/>
		                        </a>
		                    </div>
		                </div>
			            <input type="hidden" value="" id="is_loginsuccess"/>
			        </div>
			    </div>
			</form>  
		</div>
		<div class="section fp-auto-height">
	        <div class="footer_content inner-width">
	            <p>
	                <a class="footerlink-1" target="_blank" href="http://vico.vw.com.cn/zh/easy_buy/dealer_search/dealersearch.html"><img src="img/footer_1_1.png"></a>｜
	                <a class="footerlink-2" target="_blank" href="http://vico.vw.com.cn/zh/Service/contactus/contactus.html"><img src="img/footer_2_1.png"></a>｜
	                <a class="footerlink-3" target="_blank" href="http://www.vw.com.cn/zh/tools/navigation/footer/legal.html"><img src="img/footer_3_1.png"></a>｜
	                <a href="http://vico.vw.com.cn/zh.html" class="footerlink-4" target="_blank"><img src="img/footer_4_1.png"></a>
		        </p>
	      	</div>
    	</div>
	</div>
	<div class="float-layout" id="float-success" style="display: none;">
		<div class="float-content float-success">
			<div class="close"></div>
			<div class="more"></div>
			<div class="share"></div>
		</div>
	</div>
	<div class="float-layout" id="float-rule" style="display: none;">
		<div class="float-content float-rule">
			<div class="close"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
    (function(){
    var ualist = ["ipad","iphone","android","windows phone"]
    var ua = navigator.userAgent.toLowerCase();
    var isMobile = 0;
    window.isiOS = 0;
    for(var i in ualist){
        if(ua.indexOf(ualist[i]) > -1){
            if(ualist[i]=='ipad'||ualist[i]=='iphone'){
                isiOS = 1;
            }
            isMobile = 1;
            break;
        }
    }
    var search = location.search;
         if(isMobile!=1){
            location.href = './index.html'+search;
        }
   
    window.IS_MOBILE = isMobile;
    
    if(isMobile!=1){
            location.href = './index.html'+search;
    }
        
//            if(isMobile)
//                document.write('<meta name="viewport" id="importantMeta" content="width=640, user-scalable=yes, maximum-scale=0.8, target-densitydpi=device-dpi">'); 
})()
</script>
</html>